<template>
  <div class="container">
    <div class="pop-title">提醒条件设置</div>
    <div class="text">提示：设置的条件会应用到所有打开提醒的个股，下次开启将不再提示</div>
    <div class="pop-body">
      <atom-checkbox-group v-model="result">
        <atom-cell-group>
          <atom-cell
            v-for="(item, index) in optionArr"
            clickable
            :title="item"
            :name="index + 1"
            :key="item"
            @click="toggle(index + 1)"
          >
            <template #right-icon>
              <atom-checkbox :name="index + 1" ref="checkboxes" />
            </template>
          </atom-cell>
        </atom-cell-group>
      </atom-checkbox-group>
    </div>
    <div class="bottom">
      <atom-button type="primary" block @click.stop="submit">确认</atom-button>
    </div>
  </div>
</template>

<script>
import { reqPostBase } from '@/apis/index.js';
import { errorReport } from '@/scripts/tools.js';
export default {
  props: {
    monitorStatus: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      optionArr: [
        '封涨停',
        '逼近涨停',
        '打开涨停',
        '即将打开涨停',
        '逼近涨停',
        '封跌停',
        '打开跌停板',
        '即将打开跌停',
        '大幅拉升',
        '快速跳水',
      ],
      result: [],
    };
  },
  methods: {
    toggle(i) {
      const index = this.result.findIndex(item => item === i);
      if (index !== -1) {
        this.result.splice(index, 1);
      } else {
        this.result.push(i);
      }
    },
    submit() {
      reqPostBase({ op: 'setMonitorStatus', statusId: this.result.join(',') })
        .then(() => {
          this.$emit('closePopup');
        })
        .catch(err => {
          this.$toast('数据异常，请稍后重试');
          errorReport({
            name: `提醒条件设置确认接口错误，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        });
    },
  },
  watch: {
    monitorStatus: {
      deep: true,
      immediate: true,
      handler(nval) {
        this.result = JSON.parse(JSON.stringify(nval));
      },
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  position: relative;

  .pop-title {
    width: 100vw;
    height: 128px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-Medium;
    font-size: 36px;
    color: var(--text-1);
    text-align: center;
    line-height: 44px;
    font-weight: bold;
  }

  .pop-body {
    font-size: 28px;
    height: 66%;
    overflow-y: auto;
  }

  .text {
    box-sizing: border-box;
    width: 100%;
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #ff661a;
    text-align: justify;
    line-height: 36px;
    font-weight: 400;
    padding: 0 32px;
  }

  .bottom {
    width: 100%;
    padding: 0 32px;
    box-sizing: border-box;
    position: absolute;
    bottom: 50px;
    /deep/.atom-button--block{
      height: 88px;
    }
  }
}
</style>
